<script setup>

import {onMounted, ref, reactive} from "vue";
import * as echarts from "echarts";

let chart = null
const target = ref()

onMounted(() => {
    chart = echarts.init(target.value);
    renderChart()
})

const renderChart = () => {
    const option =  {
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['Mon']
        },
        series: [
            {
                name: 'Direct',
                type: 'bar',
                stack: 'total',
                data: [334]
            },
            {
                name: 'Mail Ad',
                type: 'bar',
                stack: 'total',
                data: [134]
            },
            {
                name: 'Affiliate Ad',
                type: 'bar',
                stack: 'total',
                data: [234]
            },
            {
                name: 'Video Ad',
                type: 'bar',
                stack: 'total',
                data: [154]
            },
            {
                name: 'Search Engine',
                type: 'bar',
                stack: 'total',
                data: [934]
            }
        ]
    }
    chart.setOption(option);
}
</script>

<template>
    <div ref="target" style="width: 500px; height: 200px"></div>
    <div style="background-color: red; margin-left: 200px; margin-top: 200px; width: 1000px; height: 100px;">
        <div style="display: flex">
            <div style="background-color: green; width: 200px; height: 100px; margin-left: 100px; transform: skewX(45deg)"></div>
            <div style="background-color: blue; width: 200px; height: 100px; margin-left: 100px; transform: skewX(45deg)"></div>
        </div>
    </div>
</template>

<style scoped>

</style>
